<script setup lang="ts">
import {ref,computed} from 'vue' 
import { useRouter } from 'vue-router';
import {verifyTel} from '@/api/user';
import { showFailToast } from 'vant';


const pattern=/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/
const tel=ref('')
const router=useRouter()

//发送请求验证手机号是否被注册
function onSubmit(){
    verifyTel({tel: tel.value}).then(res=>{
        console.log(res);
        if(res.data.code==200){
            //发送手机号码给兄弟组件
            localStorage.setItem('Tel', JSON.stringify(tel.value))
            router.push('/register/step2')
        }else{
            showFailToast(res.data.message);
        }
    })
}

//检测手机号是否符合正则
const flag=computed (()=>{
    return pattern.test(tel.value)    
})
</script>

<template>
    <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field
                v-model="tel"
                name="手机号"
                label="手机号"
                placeholder="请输入手机号"
                :rules="[{ required: true, message: '请填写正确的11位手机号', pattern}]"
                />
            </van-cell-group>
            <div style="margin: 30px 16px 16px 16px;">
                <van-button  :disabled="!flag" round block color="#f66" native-type="submit">
                下一步
                </van-button>
            </div>
    </van-form>
</template>